<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<!-- Pager CSS -->
<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
<link rel="stylesheet" href="__STATIC__/assets/unpkg/element-ui@2.12.0/lib/theme-chalk/index.css">
<style type="text/css">
	table label{
		font-weight: bold;
		/*padding-right: 20px;*/
	}
	table span{
		margin-right:50px;
	}
	.pop{
		position: absolute;
		width: 300px;
		padding: 8px;
		background: #eee;
		box-shadow: 5px 5px 5px #888888;
		display: none;
	}
	.pop ul{
		list-style: none;
		overflow: hidden;
		padding: 0px;
	}
	.pop ul li{
		float: left;
		padding: 5px;
	}
	.pop ul li:hover{
		cursor: pointer;
		color: #00aaff
	}

	.table > tbody > tr > td{
		border-top:0px;
	}
	.table > tbody + tbody {
    	border-top: 1px solid #ddd;
	}
	.green{
		color: green;
		font-weight: bold;
	}
	.red{
		color: red;
		font-weight: bold;
	}
</style>
</head>

<body>
	<!-- MAIN -->
	<div class="main" id="app">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>订单管理</li>
			    <li>退货订单</li>
			</ul>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="售后中" name="first"></el-tab-pane>
				<el-tab-pane label="售后完成" name="second"></el-tab-pane>
			</el-tabs>
			<div class="container-fluid">
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline">
						提交日期：<input type="text" class="form-control"  size="6" name="date1" onclick="WdatePicker()">
				 		- <input type="text" size="6" class="form-control" name="date2" onclick="WdatePicker()">
						 退款时间：<input type="text" class="form-control"  size="6" name="date3" onclick="WdatePicker()">
				 		- <input type="text" size="6" class="form-control" name="date4" onclick="WdatePicker()">
						 <input type="text" class="form-control" placeholder="订单号" size="6" v-model="search.order_no">
						<vue-select 
							placeholder="销售"
							v-model="search.acct_name"
							url="{%:url('Account/getSalers')%}"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<input type="text" class="form-control" placeholder="客户" size="6" v-model="search.cust">
						<select class="form-control" v-model="organizationId" placeholder="请选择">
							<option
							  v-for="item in organizationData"
							  :key="item.id"
							  :label="item.name"
							  :value="item.id">
							</option>
							<option
							  label="不选择"
							  :value="null">
							</option>
						</select>
					    <button type="button" class="btn btn-primary search" @click="getList()">查询</button>
						<button type="button" class="btn btn-primary search" @click="getListExcel(cur_page)">导出数据</button>
					</form>
				</div>
				<!-- 数据开始-->
				<div class="row" id="result">
					<table class="table table-hover table-condensed">
						<thead>
							<tr>
								<th>登记日期</th>
								<th>退款时间</th>
								<th>订单号</th>
								<th>客户</th>
								<th>销售</th>
								
								<th>商品</th>
								<th>名称</th>
								<th>订单数量与尺码</th>
								<th>颜色</th>
								<th>单价</th>
								<th v-if="is_pur_price">工厂价</th>
								<th>退款金额</th>
								<th>退货数量</th>
								<th>退货原因</th>
								
								<th>处理状态</th>
								<th>物流信息</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="item,i in rows">
								<td>{{ item.add_day }}
									<span style="font-size: 12px;color: #aaa">{{ item.add_time }}</span>
								</td>
								<td>{{ item.final_time }}</td>
								<td>{{ item.order_no }}</td>
								<td>{{ item.cust }}</td>
								<td>{{ item.saler }}</td>
								<td>
									<a :href="item.pic" target="_BLANK">
										<img :src="item.pic" height="38" class="pre_view">
									</a>
								</td>
								<td>{{ item.goods_name }}</td>
								<td>{{ item.order_qty }} * {{ item.spec }}</td>
								<td>{{ item.color }}</td>
								<td>{{ item.price }}</td>
								<td v-if="is_pur_price">{{ item.pur_price }}</td>
								<td>
									<span style="cursor: pointer;" @click="openRefund(item)">
										{{ item.refund_total||'未填写' }}
									</span>
									
								</td>
								<td>{{ item.qty }}</td>
								<td>{{ item.reason }}</td>
								<td>
									<span :class="[item.type != '3' ? 'red' : 'green']">
									{{ item.type != '3' ? (item.type == '1'?'售后中':'同意') : '完成' }}</span>
								</td>
								<td>{{ item.exp_name }}<div>{{ item.exp_no }}</div></td>
								<!-- <td><a href="javascript:;" @click="registerExp(item)" v-if="!item.express_item_id">登记物流</a></td> -->
								<td>
									<a href="javascript:;" @click="changeCancelOrderStatus(item.id,'2')" v-if="item.type=='1'">同意</a>
									<a href="javascript:;" @click="changeCancelOrderStatus(item.id,'3')" v-if="item.type=='2'">完成</a>
									<!-- <a href="javascript:;" @click="delRejectOrder(item.id)" >取消</a> -->
									<a href="javascript:;" @click="registerExp(item)" v-if="!item.express_item_id">登记物流</a>
								</td>
							</tr>
						</tbody>
					</table>
					<div>
						<div>
							每页
							<select v-model="page_size" @change="getList(1)">
								<option value="10">10</option>
								<option value="15">15</option>
								<option value="20">20</option>
								<option value="50">50</option>
								<option value="100">100</option>
								<option value="200">200</option>
								<option value="1000">1000</option>
							</select> 条
						</div>
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
					</div>
				</div>
				<!-- 数据结束-->				
			</div>
		</div>
		<!-- END MAIN CONTENT -->
		<vue-modal :visible.sync="showModal" title="详情">
			<form class="form-horizontal" role="form" method="post" style="width: 90%;">
				<div class="form-group">
					<label for="lastname" class="col-sm-2 control-label">订单号/客户</label>
					<div class="col-sm-3 form-control-static">
						{{ express.order_no }} / {{ express.cust }}
					</div>
				</div>
				<div class="form-group">
					<label for="lastname" class="col-sm-2 control-label">商品</label>
					<div class="col-sm-3 form-control-static">
						{{ express.goods_name }}
					</div>
					<div class="col-sm-1"><img :src="express.pic" id="preview" height="220" style="position: absolute;"></div>
				</div>
				<div class="form-group">
					<label for="lastname" class="col-sm-2 control-label">换货原因</label>
					<div class="col-sm-3 form-control-static">
						{{ express.reason }}
					</div>
				</div>
				<div class="form-group">
					<label for="lastname" class="col-sm-2 control-label">物流公司</label>
					<div class="col-sm-2">
						<select class="form-control" v-model="express.name">
							<option value=""> - 选择 - </option>
							<option value="顺丰"> 顺丰 </option>
							<option value="圆通"> 圆通 </option>
						</select>
					</div>
					
				</div>
				<div class="form-group">
					<label for="lastname" class="col-sm-2 control-label">物流单号</label>
					<div class="col-sm-2">
						<input type="text" class="form-control" v-model="express.express_no">
					</div>
				</div>
				<div class="form-group">
					<label for="lastname" class="col-sm-2 control-label">发货数量</label>
					<div class="col-sm-2">
						<input type="text" class="form-control" v-model="express.qty">
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-3">
						<button type="button" class="btn btn-primary" @click="registerExpHandle()">确定</button>
					</div>
				</div>
			</form>
		</vue-modal>
		<!-- 修改退款金额 -->
		<el-dialog
		title="修改退款金额"
		:visible.sync="dialogVisible"
		width="30%">
		<span >退款金额</span>
		<el-input v-model="refundTotal" placeholder="请输入内容"></el-input>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="operateOpt">确 定</el-button>
		</span>
		</el-dialog>
	</div>
	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/components/vue-select.js"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<script src="__STATIC__/assets/vendor/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript">
		
		var vm = new Vue({
			el: '#app',
			data: {
				dialogVisible:false,
				refundId:0,
				refundTotal:'',
				page_size:15,
				organizationData:[],//组织
				organizationId:null,//团队id
				search:{
					order_no:'',
					acct_name: '',
					cust: ''
				},
				rows: [],
				is_pur_price:false,//是否显示工厂价
				total_page: 0,
				cur_page: 1,
				progress_class: ['label-danger','label-primary','label-info','label-warning','label-success','red','orange'],
				showModal: false,
				express: {
				
				},
				activeName: 'first'
			},
			components: {
				'vue-page': vuePage,
				'vue-select': vueSelect,
				'vue-modal': vueModal
			},
			created: function(){
				this.getList();
				this.getOrganization();
			},
			methods:{
				openRefund(item){
					this.refundId = item.id;
					this.refundTotal = item.refund_total;
					this.dialogVisible = true;
				},
				operateOpt(){
					let t = this;
					let data = {
						id:this.refundId,
						refund_total:this.refundTotal
					};
					let url = "{%:url('Orders/setReturnAtrr')%}"
					$.ajax({
			            url,
			            type:'POST',
			            dataType: 'json',
			            data,
			            success:function(rsp){
			                if(rsp.code == 1){
								t.$message.success(rsp.msg);
								t.getList(t.cur_page);
								t.dialogVisible = false;
							}else{
								t.$message.error(rsp.msg);
							}
			            }
			        });
				},
				// 获取团队列表
				getOrganization(){
					let that = this;
					$.post("{%:url('organization/getlist')%}",{
					all:'all'
					},function(rsp){
						if(rsp.code == 1){
							that.organizationData = rsp.data;
						}
					},'json')
				},
				changeCancelOrderStatus(id,type){
					let t = this;
					let url = type == '2'?"{%:url('Orders/agreeReturn')%}":"{%:url('Orders/finalReturn')%}"
					$.ajax({
			            url,
			            type:'POST',
			            dataType: 'json',
			            data: {id,type},
			            success:function(rsp){
			                if(rsp.code == 1){
								t.$message.success(rsp.msg);
								t.getList(t.cur_page);
							}else{
								t.$message.error(rsp.msg);
							}
			            }
			        });
				},
				delRejectOrder(id){
					let t = this;
					let url = "{%:url('Orders/delReturn')%}"
					$.ajax({
			            url,
			            type:'POST',
			            dataType: 'json',
			            data: {id},
			            success:function(rsp){
			                if(rsp.code == 1){
								t.$message.success(rsp.msg);
								t.getList(t.cur_page);
							}else{
								t.$message.error(rsp.msg);
							}
			            }
			        });
				},
				handleClick(tab, event) {
					this.getList();
				},
				getList: function(page=1){
					var data = {};
					data = this.search;
					data['progress'] = 0;
					if(this.activeName == 'first'){
						data['type'] = ['1','2'];
					}else{
						data['type'] = ['3'];
					}
					let date1 = $("input[name='date1']").val();
					let date2 = $("input[name='date2']").val();
					if (date1 && date2) {
						data['date1'] = date1;
						data['date2'] = date2;
					}
					let date3 = $("input[name='date3']").val();
					let date4 = $("input[name='date4']").val();
					if (date3 && date4) {
						data['date3'] = date3;
						data['date4'] = date4;
					}
					// 团队查询条件
					data['organization_id'] = this.organizationId;
					var _this = this;
					$.ajax({
			            url: "{%:url('Orders/getReturnList')%}?page="+page+'&page_size='+_this.page_size,
			            type:'POST',
			            dataType: 'json',
			            data: data,
			            success:function(rsp){
			                _this.rows = rsp.data.rows;
							_this.is_pur_price = rsp.data.is_pur_price;
			                _this.total_page = rsp.data.total_page;
							_this.cur_page = Number(rsp.data.page);
			            }
			        });
				},
				getListExcel: function(page=1){
					var data = {};
					data = this.search;
					data['progress'] = 0;
					if(this.activeName == 'first'){
						data['type'] = ['1','2'];
					}else{
						data['type'] = ['3'];
					}
					let date1 = $("input[name='date1']").val();
					let date2 = $("input[name='date2']").val();
					// 获取退款时间
					let date3 = $("input[name='date3']").val();
					let date4 = $("input[name='date4']").val();
					// 团队查询条件
					data['organization_id'] = this.organizationId;
					var _this = this;
					let organizationId = this.organizationId||'';
					let excelUrl = "{%:url('Orders/getReturnListExcel')%}"+'?page='
					+_this.cur_page+'&page_size='+_this.page_size+
					'&organization_id='+organizationId+'&order_no='
					+this.search.order_no+'&cust='
					+this.search.cust+'&acct_name='+this.search.acct_name+'&type='+data['type']+'&date1='
				+date1+'&date2='+date2+'&date3='+date3+'&date4='+date4;
					window.location.href = excelUrl;
				},
				toItemDetail: function(id){
					this.showModal = true;
					var data = {
						id: id
					};
					var _this = this;
					$.post("{%:url('Orders/getItemInfo')%}",data,function(rsp){
						_this.info = rsp.data.info;
					},'json')
				},
				registerExp: function(item){
					this.express = {
						id: item.id,
						order_item_id: item.order_item_id,
						order_no: item.order_no,
						cust: item.cust,
						goods_name: item.goods_name,
						pic: item.pic,
						reason: item.reason,
						name: '',
						express_no: '',
						qty: ''
					};
					this.showModal = true;
				},
				registerExpHandle: function(){
					var data = this.express;
					var _this = this;
					$.post("{%:url('Express/returnExpHandle')%}",data,function(rsp){
						alert(rsp.msg)
						if (rsp.code) {
							_this.getList();
							_this.showModal = false;
						}
					},'json')
				}
			}
		});
		var tip_index;
		//鼠标事件
		$('table').on('mouseover','img.pre_view',function(){
			tip_index = layer.tips("<img src='"+$(this).attr('src')+"' height='220'>", this, {
				tips: [2, '#eee'],
				time: 0
			});
		}).on('mouseleave','img.pre_view',function(){
			layer.close(tip_index);
		})	
		
	</script>
</body>

</html>